<template id="infoList">
    <div>
        <div class="infoList" ref="scrollDiv">
            <ul
            v-infinite-scroll="moreList"
            infinite-scroll-disabled="loading"
            infinite-scroll-immediate-check = "true"
            infinite-scroll-distance="100">
                <li v-for="(item, index) in transaction"  @click="messageDetail(item)" :key="index" class="white_bg">
                    <div class="info_icon order_info" v-if="routeInfo == 'transaction' ">
                        <i class="icon iconfont icon-dingdanxiaoxi-"></i>
                    </div>

                    <div class="info_icon coupons_info" v-if="routeInfo == 'coupon'">
                        <i class="icon iconfont icon-youhuiquanxiaoxi-"></i>
                    </div>
                    <div class="info_icon comment_info" v-if="routeInfo == 'comment'">
                        <i class="icon iconfont icon-daipinglunxiaoxi-"></i>
                    </div>
                    <div class="info_icon comment_info" v-if="routeInfo == 'wallet'">
                        <img style="width: 3rem;height: 3rem;" src="../../images/walletIcon.png"/>
                    </div>
                    <div class="info_list_con">
                        <div class="info_list_tit">
                            <span>{{item.crTTime | endtimeStamp}}</span>
                            {{item.msgTiTle|commTitle}}
                        </div>
                        <div class="info_list_text" v-if="routeInfo == 'transaction'" v-html="item.msgContent">
                            <!-- {{item.msgContent}} -->
                        </div>
                        <div class="info_list_text" v-if="routeInfo == 'coupon'" v-html="item.msgContent">
                            <!-- {{item.msgContent}} -->
                        </div>
                        <div class="info_list_text" v-if="routeInfo == 'comment'">
                            {{item.msgContent}}
                        </div>
                        <div class="info_list_text" v-if="routeInfo == 'wallet'" v-html="item.msgContent">
<!--                            {{item.msgContent}}-->
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- <div  ref="goTopBtn" class="go_top" @click="goTop"></div> -->
        <go-top v-show="goTopState" id="goTopId" ref="goTopId"></go-top>
        <div class="loading-box" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="transaction.length>6">没有更多</div>
    </div>
</template>
<script>import header from '../../componentes/global/header.vue'
import * as types from '../../vuex/types.js'
import getData from '../../service/getData.js'
import getData2 from '../../service/getData2.js'
import listLoading from '../../componentes/global/listLoading.vue'
import { mapState } from 'vuex'
import { Toast } from 'mint-ui'
export default {
	data() {
		return {
			loading: true,
			noMoreCoupon: true,
			goTopState: false,
			moreInfo: true
		}
	},
	created: function() {
		let title;
		// 监视滚动
		window.addEventListener('scroll', this.handleScroll);
		if(this.routeInfo == 'transaction') {
			title = "订单消息"
		} else if(this.routeInfo == 'coupon') {
			title = "电子券消息"
		} else if(this.routeInfo == 'wallet') {
			title = "钱包提醒"
		}
		this.$emit('header-info', {
			title,
			isBack: true,
			isMessage: false
		})
		this.$store.commit(types.transaction_info);
		this.$store.commit(types.transaction_page, 1);
		this.$store.commit(types.GET_SCORLL_STATUS, true);
		this.clickMoreList();
	},
	components: {
		'v-header': header,
		listLoading
	},
	filters: {
		commTitle: function(value) {
			if(!value) {
				return;
			}
			if(value.indexOf('评论') == 0) {
				value = '待' + value
			}
			return value;
		}
	},
	beforeRouteLeave(to, from, next) {
		// document.body.style.background = "#ffffff";
		// 避免返回时未清除定时器
		if(this.$refs.goTopId) {
			this.$refs.goTopId.clear();
		}
		window.removeEventListener('scroll', this.handleScroll);

		next()
	},
	computed: {
		...mapState({
			transaction: state => state.info.transaction,
			transactionLimit: state => state.info.transactionLimit,
			transactionPage: state => state.info.transactionPage,
		}),
		routeInfo: function() {
			return this.$route.params.type
		}
	},
	methods: {
		clickMoreList: function() {
			if(!this.noMoreCoupon) { //防止重复点击
				return
			}
			let me = this;
			this.noMoreCoupon = false;
			this.$store.dispatch("getInfoList", {
				'method': 'post',
				data: {
					type: me.$route.params.type
				}
			}).then(rep => {
				if(rep.content.list) {
					if(rep.content.list.length < me.transactionLimit) {
						setTimeout(function() {
							me.noMoreCoupon = true;
						}, 300);
						me.moreInfo = false
					}
					if(rep.content.list.length == me.transactionLimit) { //如果列表数据够8条，开启下拉加载
						me.moreInfo = true;
						me.loading = false;
						me.noMoreCoupon = false;
					}
					// if (me.transactionPage==1) {
					//     if(rep.content.list.length == me.transactionLimit){
					//         me.liNum=me.transactionLimit;
					//         console.log()
					//         var scrollHeight=me.$refs.scrollDiv.clientHeight;
					//         console.log(scrollHeight)
					//         me.cleHeight=scrollHeight*3;
					//     }
					// }
				} else {
					setTimeout(function() {
						me.noMoreCoupon = true;
					}, 300);
				}
			}).catch(function(rep) {
				setTimeout(function() {
					me.noMoreCoupon = true;
				}, 300);
			});
		},
		moreList: function() {
			this.loading = true;
			this.noMoreCoupon = true;
			this.clickMoreList();
		},
		messageDetail(item) {
			if(this.routeInfo == 'transaction') { // 订单消息
				this.$router.push({
					path: '/myOrder'
				});
			} else if(this.routeInfo === 'coupon') { // 电子券
				this.jumpCard(item)
			} else if(this.routeInfo === 'comment') { // 评论
				this.jumpComm(item)
			} else if(this.routeInfo === 'wallet') { // 评论
				this.$router.push({
					name: 'walletInfo',
					query: {
						msgTiTle: item.msgTiTle,
						crTTime: item.crTTime,
						msgContent: item.msgContent
					}
				});
			}
		},
		// 电子券
		jumpCard: function(item) {

				let me = this;
				if((item.msgTiTle == '分享'&&item.msgContent.indexOf('快去查看吧')==-1)||(item.msgTiTle == '出售'&&item.msgContent.indexOf('快去查看吧')==-1)) {
					return
				} else if(item.msgTiTle == '电子券交易') {
					this.$router.push({
						path: '/dealDetail/' + item.msgTrail
					});
					return
					// }
				} else if(item.msgTiTle == '电子券出售') {
					this.$router.push({
						name: 'cardList',
						query: {
							infoType: 3
						}
					});
					return
				}
				this.$router.push({
					path: '/cardList'
				});


		},
		//订单
		jumpOrder: function() {
			this.$router.push({
				path: '/myOrder'
			});
		},
		//评论
		jumpComm: function(item) {
			// console.log(item)
			let me = this;
			if(item.msgTiTle == '评论' || item.msgTiTle == '待评论') {
				this.$router.push({
					path: '/pendingComt'
				});
				return
			} else if(item.msgTiTle == '回复评论') {
				if(item.msgTrail > 0) {
					getData2.getInfoComm({
						'method': 'post'
					}, item.msgTrail).then(function(rep) {
						console.log(rep)
						if(rep.content.commType == 'mcht') {
							me.$router.push({
								'name': 'commentDetail',
								query: {
									commId: rep.content.commId,
									mchtId: rep.content.mchtId,
									replyStyle: 1
								}
							});
						} else if(rep.content.commType == 'coupon') {
							me.$router.push({
								'name': 'commentDetail',
								query: {
									commId: rep.content.commId,
									usrId: rep.content.usrId,
									replyStyle: 0
								}
							});
						}
					})
				} else {
					Toast({
						message: '早期消息无法查询',
						duration: 800
					});
				}
				return
			}
		},
		//监听滚动事件
		handleScroll() {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var scrollHeight = document.documentElement.clientHeight || document.body.scrollTop;
			// console.log(scrollHeight)
			if(scrollTop >= scrollHeight + 50) {
				this.goTopState = true
			} else {
				this.goTopState = false
			}
			//回到顶部过程中用户滚动滚动条，停止定时器
			if(scrollTop <= 0) {
				if(this.$refs.goTopId) {
					this.$refs.goTopId.clear();
				}
			};

		},

	}
}</script>
<style>.infoList {
	margin-top: 1rem;
}

.infoList li {
	min-height: 5rem;
	border-bottom: 1px solid #f0f0f0;
	/*background: #fff;*/
	position: relative;
	padding-bottom: .4rem;
}

.infoList li a {
	color: #333;
}

.coupons_info {
	background: -webkit-linear-gradient(35deg, #4ea0ec, #14c1fa);
}

.order_info {
	background: -webkit-linear-gradient(35deg, #e5ab1c, #f1bf2a);
}

.comment_info {
	background: -webkit-linear-gradient(35deg, #ff6d31, #fe8439);
}

.overdue_info {
	background: -webkit-linear-gradient(35deg, #ed5355, #fd6f54);
}

.friend_info {
	background: -webkit-linear-gradient(35deg, #78b93b, #a1dd49);
}

.sys_info {
	background: -webkit-linear-gradient(35deg, #6886f8, #658eff);
}

.info_icon {
	height: 3rem;
	width: 3rem;
	line-height: 3rem;
	text-align: center;
	float: left;
	border-radius: .2rem;
	margin: 1rem 0 0 1rem;
	position: relative;
	z-index: 2;
}

.info_tag {
	border-top: 1rem solid #ff3c66;
	border-left: 1rem solid #ff3c66;
	border-right: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	position: absolute;
	top: -.2rem;
	left: -.2rem;
	border-top-left-radius: .2rem;
	z-index: 3;
	filter: drop-shadow(.2rem .2rem .2rem rgba(0, 0, 0, .3))
}

.info_tag:before {
	content: "";
	right: -1.2rem;
	top: -1rem;
	border-bottom: .2rem solid #82051f;
	border-left: .2rem solid transparent;
	border-right: .2rem solid transparent;
	position: absolute;
}

.info_tag:after {
	content: "";
	left: -1.2rem;
	bottom: -1.2rem;
	border-bottom: .2rem solid transparent;
	border-left: .2rem solid transparent;
	border-top: .2rem solid transparent;
	border-right: .2rem solid #82051f;
	position: absolute;
}

.info_tag span {
	position: absolute;
	left: -1.4rem;
	top: -.9rem;
	font-size: .8rem;
	color: #fff;
	width: 2rem;
	text-align: center;
	display: block;
	font-family: Arial;
	z-index: 31;
	line-height: normal;
}

.info_icon .icon {
	font-size: 1.8rem;
	color: #fff;
}

.info_list_con {
	overflow: hidden;
	padding: 0 .667rem;
}

.info_list_tit {
	font-size: 1rem;
	margin-top: 1rem;
}

.info_list_tit span {
	float: right;
	font-size: 1rem;
	color: #999;
	font-family: Arial;
}

.info_list_text {
	font-size: 1rem;
	color: #999;
	line-height: 1.6rem;
	margin-top: .2rem;
}

.info_mar_bot {
	padding-bottom: 2rem;
}</style>
